<template>
  <div  class="box">
    <div  type="flex" justify="space-around" :to="{query:{ID: dataShow[index].id, condition: dataShow[index].condition,index:index+1}}" v-for="(item,index) in dataShow" :key="index">
      
        <div class="fengji">
    <card :ID='item.id' :Condition='item.condition' ></card>

      </div>
    </div>
    <div class="footer">
      <input type="button" value="上一页" @click="prePage">
        <span v-for="i in pageNum" @click="page(i)" :style="{cursor: 'pointer', margin:'5px'}">{{ i }}</span>
        <input type="button" value="下一页" @click="nextPage">
    </div>
    
  </div>
</template>
   
   <script>
  import { ref } from 'vue'
  import {getopinion} from '../../../networks/opinion.js'
  import card from './fenjicard.vue'     
  const ID = ref('hello vue3.x')
  const Condition = ref('hello vue3.x')
export default {
  components:{
      card
  },
data() {
  return {
      equipment: [],//总体数据
      totalnum:0,
      totalPage: [],
      pageSize:20,
      currentPage:0,
      pageNum:0,
      dataShow: [], // 当前显示的数据 
     
  };
},

mounted(){
  this.getopinion();
},
methods:{
  async getopinion(){
    await getopinion().then(res =>
    {
      this.equipment=res;
      this.totalnum=this.equipment.data.length;
      this.pageNum = Math.ceil(this.equipment.data.length / this.pageSize) || 1;//计算有多少页数据，默认为1
      for (let i = 0; i < this.pageNum; i++) {
            // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
            // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为2， 则第一页是1-2条，即slice(0,2)，第二页是3-4条，即slice(3,4)以此类推
            this.totalPage[i] = this.equipment.data.slice(this.pageSize * i, this.pageSize * (i + 1))
            
            }
      this.dataShow = this.totalPage[this.currentPage];
    })
  },
  nextPage() {
              if (this.currentPage === this.pageNum - 1) return ;
              this.dataShow = this.totalPage[++this.currentPage];
            },
            // 上一页
            prePage() {
              if (this.currentPage === 0) return ;
              this.dataShow = this.totalPage[--this.currentPage];
            },
            // 点击页码
            page(i){
                this.currentPage = i
                this.dataShow = this.totalPage[i-1];
            }
}

}

   </script>
   
   <style lang='less' scoped>
  .box{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:center;
  .fengji{
    padding: 10px 10px;
  }
  .footer{
    width: 100%;
    display: flex; justify-content: center;align-items: center;
  }
  }
  
   </style>